<template>
  <div class="login">
    <div class="header">
      <span class="header-logo">
        <i class="iconfont icon-Vue"></i>
        <i class="iconfont icon-jiahao"></i>
        <i class="iconfont icon-textarea"></i>
      </span>
      <span>在线考勤系统</span>
    </div>
    <p class="header-hint">零基础从入门到进阶，系统掌握三大热门技术(Vue、React、TypeScript)</p>
    <el-form ref="ruleFormRef" :rules="loginRules" :model="form" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="邮箱：" prop="email" required>
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="密码：" prop="pass" required>
        <el-input type="password" :clearable="false" v-model="form.pass" show-password placeholder="请输入密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { loginRules } from '@/utils/rules'
import type { FormInstance } from 'element-plus';
import type { loginParams } from '@/types/user.d.ts'
import { userLogin } from '@/api/user.ts'
import { useUserStore } from '@/stores'
const form = reactive<loginParams>({
  email: 'huangrong@imooc.com',
  pass: 'huangrong'
})

const ruleFormRef = ref<FormInstance>()
const store = useUserStore()

//提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // 调用接口
      const res = await userLogin(form)
      if (res.status === 200) {
        console.log(res)
        store.setUserData(res.data)
      }
    } else {
      // 提醒
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
</style>
